<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>大咖分享</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <link rel="stylesheet" href="css/index.css">
    <style>
        .position{
            position: fixed;
            z-index: 2;
            top: 0;
        }
        .position_footer{
            /*margin-top: 7.574rem;*/
        }
        .infoBox{
            margin: 0.4rem 0 0.4rem 0.187rem;
            clear: both;
        }
        .down_img{
            width: 10rem;
            position: fixed;
            bottom: 0;
            z-index: 2;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="position">
        <div class="n_master_info_head">
            <div class="top">
                <div class="nav_margin">
                    <div class="n_head_box">
                        <div class="n_head"><img :src="teacher.avatar" alt=""></div>
                    </div>
                    <div class="n_content_box">
                        <div class="top">
                            <div class="name">{{teacher.realname}}</div>
                            <div class="degree">{{teacher.degree}}</div>
                            <div class="num_followed">{{teacher.num_followed}} <span>已关注</span></div>
                        </div>
                        <div class="bottom">
                            {{teacher.intro}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="nav_box nav_background teacer_nav_box">
            <div style="text-align: center;color: #188ccc">动态</div>
        </div>
    </div>
    <div style="height:5.294rem">
        <div id="teacher_video_box" style="width: 1px;height:1px;position: absolute;z-index: -1" ></div>
    </div>
    <div class="position_footer">
        <div class="table_content table_content1 active_b" id="tuwen" style="background: transparent">
        </div>
    </div>

    <div class="clear" style="height: 1.5rem"></div>
    <img class="down_img" style="width: 10rem;position: fixed;bottom: 0;z-index: 2;" src="img/dowm.png" alt="">
</div>

</body>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="js/rem.js"></script>
<script>
    function getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
        var r = window.location.search.substr(1).match(reg); //匹配目标参数
        if (r != null) return unescape(r[2]); return null; //返回参数值
    }
    var fenshu = getUrlParam('teacher_id');

    var app = new Vue({
        el: '#app',
        data: {
            teacher:{},
            txet:{}
        },
        created: function () {
            this.geTeacherInfo();
            this.getTeacherText();
        },
        methods: {
            geTeacherInfo:function () {
                var that = this;
                $.ajax({
                    url: "/api/teachers/detail",    //请求的url地址
                    headers: {
                        appid: '1',
                        appsecret: '39b3567d0b8ac89c025b78beec26acb0',
                    },
                    dataType: "json",   //返回格式为json
                    async: true,
                    data: {teacher_id:fenshu},    //参数值 由APP传递
                    type: "post",
                    success: function (req) {
                        that.teacher = req.data;
                    },
                    complete: function () {
                        //请求完成的处理
                    },
                    error: function () {
                        //请求出错处理
                    }
                });
            },
            getTeacherText:function (data) {
                var self = this;

                $.ajax({
                    url: "/api/teachers/essay",    //请求的url地址
                    headers: {
                        appid: '1',
                        appsecret: '39b3567d0b8ac89c025b78beec26acb0',
                    },
                    dataType: "json",   //返回格式为json
                    async: true,
                    data: {category:1,teacher_id:fenshu},    //参数值 由APP传递
                    type: "post",
                    success: function (req) {
                        self.txet = req.data;
                        console.log('sdasda',req)
                            self.diaoyong()
                    },
                    complete: function () {
                        //请求完成的处理
                    },
                    error: function () {
                        //请求出错处理
                    }
                });
            },
            diaoyong:function () {
                var list = this.txet;
                console.log(this.txet)
                $('#tuwen').html('');
                for(var i=0;i<list.length;i++){
                    $('#tuwen').append(
                        ' <div class="infoBox">'+
                        '          <div class="headerBox">'+
                        '            <img src="'+list[i].avatar+'" alt="">'+
                        '          </div>'+
                        '          <div class="headerContenBox">'+
                        '            <div class="textBox" style="margin-top: 0.2rem">'+
                        '              <i class="iconfont">&#xe6d0;</i>'+
                        '              <div class="textBoxContent" id="tw_box">'+list[i].content+'</div>'+
                        '            </div>'+
                        '          </div>'+
                        '</div>'
                    )
                    var imgArr = $("img");
                    $.each(imgArr, function(){
                        $(this).attr('class','imgWitch')
                        $('.imgWitch').css('max-width','100%')
                    });
                    $('#tw_box').html()
                }
            }
        }

    })
</script>
</html>